<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .content {
            margin-top: 60px; /* 确保内容不被导航栏遮挡 */
            padding: 20px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">管理面板</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="showSection('user-management')">用户管理</a>
            </li>
<!--            <li class="nav-item">-->
<!--                <a class="nav-link" href="#" onclick="showSection('car-management')">汽车展示管理</a>-->
<!--            </li>-->
        </ul>
    </div>
</nav>

<!-- 主体内容区域 -->
<div class="content">
    <!-- 初始页面显示的文本 -->
    <div id="initial-text">
        <h2>欢迎来到管理员面板</h2>
<!--        <p>请选择一个模块进行操作：用户管理或汽车展示管理。</p>-->
        <p>请选择一个模块进行操作：用户管理</p>
    </div>

    <!-- 用户管理模块 -->
    <div id="user-management" class="hidden">
        <h2>用户管理</h2>
        <p>这里是用户管理页面的内容区域。您可以实现用户的增删改查操作。</p>

        <!-- 搜索框和搜索按钮 -->
        <div class="form-group">
            <label for="search">搜索用户：</label>
            <input type="text" id="search" class="form-control" placeholder="请输入用户名">
            <button id="search-btn" class="btn btn-primary" style="margin-top: 10px;">搜索</button> <!-- 搜索按钮 -->
            <button id="reset-btn" class="btn btn-secondary" style="margin-top: 10px;">返回</button>
        </div>


        <!-- 用户列表 -->
        <table class="table table-striped">
            <thead class="thead-dark">
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="user-table-body">
            <!-- 用户数据会动态加载到这里 -->
            </tbody>
        </table>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 页面加载时获取所有用户数据
        $(document).ready(function () {
            loadUsers();

            // 搜索功能
            $("#search-btn").on("click", function() {
                var searchQuery = $("#search").val(); // 获取搜索框中的值
                console.log(searchQuery);
                SearchUsers(searchQuery); // 调用 loadUsers 函数并传递搜索内容
            });

            // 返回功能
            $("#reset-btn").on("click", function () {
                $("#search").val(""); // 清空搜索框内容
                loadUsers(); // 重新加载所有用户
            });
        });

        // 加载所有用户数据
        function loadUsers() {
            $.get("/dev/user/loadUsers", function (data) {
                $("#user-table-body").empty();  // 清空现有的表格数据
                console.log(data);
                // 动态渲染用户数据
                data.forEach(function (user) {
                    console.log(user);
                    var row = "<tr>" +
                        "<td>" + user.id + "</td>" +
                        "<td>" + user.username + "</td>" +
                        "<td>" + user.email + "</td>" +
                        "<td>" +
                        "<button class='btn btn-primary btn-sm' onclick='editUser(" + user.id + ")'>编辑</button>" +
                        "<button class='btn btn-danger btn-sm' onclick='deleteUser(" + user.id + ")'>删除</button>" +
                        "</td>" +
                        "</tr>";
                    $("#user-table-body").append(row);
                });
            });
        }

        function SearchUsers(searchQuery) {
            $.get("/dev/user/SearchUsers?searchQuery="+searchQuery, function (user) {
                $("#user-table-body").empty();  // 清空现有的表格数据

                console.log(user);
                var row = "<tr>" +
                    "<td>" + user.id + "</td>" +
                    "<td>" + user.username + "</td>" +
                    "<td>" + user.email + "</td>" +
                    "<td>" +
                    "<button class='btn btn-primary btn-sm' onclick='editUser(" + user.id + ")'>编辑</button>" +
                    "<button class='btn btn-danger btn-sm' onclick='deleteUser(" + user.id + ")'>删除</button>" +
                    "</td>" +
                    "</tr>";
                $("#user-table-body").append(row);

            });
        }

        // 编辑用户
        function editUser(userId) {
            // 弹出编辑模态框
            $('#editUserModal').modal('show');
            //console.log(userId);
            // 通过 userId 获取用户信息（假设通过 AJAX 请求）
            $.get("/dev/user/SearchUsersById?id=" + userId, function(data) {
                console.log(data.userId);
                console.log(data.username);
                console.log(data.email);
                console.log(data.password);
                // 填充用户信息到模态框中
                $('#editUserModal').data('userId', userId);
                $('#editUsername').val(data.username);
                $('#editEmail').val(data.email);
                $('#editPassword').val(data.password); // 密码一般不会预填充
            });
        }

        function saveUser() {
            let userId = $('#editUserModal').data('userId'); // 从模态框中获取用户 ID
            let username = $('#editUsername').val();
            let email = $('#editEmail').val();
            let password = $('#editPassword').val();

            console.log(userId);
            console.log(username);
            console.log(email);
            console.log(password);
            $.post('/dev/user/updateUser',{"userid":userId,"username":username,"email":email,"pwd":password},function(){
                $('#editUserModal').modal('hide');  // 关闭模态框
                alert("用户更新成功！");
                loadUsers();  // 重新加载用户列表
            });
        }

        // 删除用户
        function deleteUser(userId) {
            if (confirm("确定要删除这个用户吗？")) {
                $.get("/dev/user/deleteuser?userId="+userId, function (){
                    alert("删除成功！")
                    loadUsers()
                });
            }
        }
    </script>

    <!-- 汽车展示管理模块 -->
<!--    <div id="car-management" class="hidden">-->
<!--        <h2>汽车展示管理</h2>-->
<!--        <p>这里是汽车展示管理页面的内容区域。您可以管理汽车展示相关的内容。</p>-->
<!--        <div class="card" style="width: 18rem;">-->
<!--            <img class="card-img-top" src="car-image.jpg" alt="汽车图片">-->
<!--            <div class="card-body">-->
<!--                <h5 class="card-title">汽车名称</h5>-->
<!--                <p class="card-text">描述汽车的详细信息。</p>-->
<!--                <a href="#" class="btn btn-primary">编辑</a>-->
<!--                <a href="#" class="btn btn-danger">删除</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>

<!-- 编辑用户的模态框 -->
<div class="modal" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">编辑用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editUserForm">
                    <div class="form-group">
                        <label for="editUsername">用户名</label>
                        <input type="text" class="form-control" id="editUsername" required>
                    </div>
                    <div class="form-group">
                        <label for="editEmail">邮箱</label>
                        <input type="email" class="form-control" id="editEmail" required>
                    </div>
                    <div class="form-group">
                        <label for="editPassword">密码</label>
                        <input type="password" class="form-control" id="editPassword">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveUser()">保存更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap 和 jQuery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- JavaScript 切换功能 -->
<script>
    function showSection(sectionId) {
        // 隐藏所有模块
        document.getElementById("user-management").classList.add("hidden");
        // document.getElementById("car-management").classList.add("hidden");
        document.getElementById("initial-text").classList.add("hidden");

        // 显示选中的模块
        document.getElementById(sectionId).classList.remove("hidden");
    }

</script>
</body>

</html>
